<template>
  <div class="Drag2">
    <div class="box" ref="box">
      <div class="left"style="overflow: auto">
        <!--左侧div内容-->
        <a-tabs>
          <a-tab-pane key="1" tab="题目详情">
            <div><h2>{{questionInfo.id}}-{{questionInfo.title}}</h2></div>
            <div v-html="questionInfo.description"></div>
          </a-tab-pane>
          <a-tab-pane v-if="isLogin" key="2" tab="提交记录">
            <a-collapse v-model:activeKey="activeKey">
              <a-collapse-panel :key="index" v-for="(item,index) in questionLog.history" :header=getLogInfo(item)>
                <a-textarea disabled="true" v-model:value=questionLog.history[index].codeText placeholder="Basic usage" :rows="4" />
              </a-collapse-panel>

            </a-collapse>
          </a-tab-pane>

        </a-tabs>

      </div>
      <div class="resize" title="左右侧边栏">⋮</div>
      <!--右侧div内容-->
      <div class="mid">
        <div style="display: flex">
          <div style="width: 40%">
            请选择语言:
            <a-select
                ref="select"
                v-model:value="codeDo.language"
                style="width: 120px"
                @focus="focus"
                @change="queryHistory"
            >
              <a-select-option :value=item
                               v-for="item in language"
              >
                {{item}}
              </a-select-option>
            </a-select>
        </div>
          <a-button type="primary" shape="round" :loading="executeCodeLoading" @click="submit" >提交代码</a-button>
          <a-button type="primary" shape="round" :loading="executeCodeLoading" @click="test">测试用例</a-button>
        </div>
        <div class="topBox">

          <a-textarea v-model:value="codeDo.codeText" placeholder="code~~" />

          <!--右上div内容-->
        </div>
        <div title="上下侧边栏" class="move">⋯</div>
        <div class="downBox">
          <!--右下div内容-->
          <a-tabs v-model:activeKey="executeOrTest">
            <a-tab-pane key="1" tab="提交结果">
              <div v-if="codeResult.status==''">
                暂无信息，请先提交您的代码
              </div>
              <div v-else-if="codeResult.message!=''&&codeResult.message!=null" style="color: red">
                {{codeResult.message}}
              </div>
              <div v-else-if="codeResult.isTestOrSubmit==='submit'">
                <a-descriptions style="text-align: left">
                  <a-descriptions-item label="提交结果">{{codeStatusEnum.get(codeResult.status)}}</a-descriptions-item>
                  <a-descriptions-item label="执行用时" v-if="codeResult.executeTime!=null">{{codeResult.executeTime}}ms</a-descriptions-item>
                  <a-descriptions-item label="通过用例"><a-progress type="circle" :percent=codeResult.correctRate :size="50"/></a-descriptions-item>
                  <a-descriptions-item label="测试用例" v-if="codeResult.error!=0">{{codeResult.errorExample}}</a-descriptions-item>
                  <a-descriptions-item label="您的输出" v-if="codeResult.error!=0">{{codeResult.errorAnswer}}</a-descriptions-item>
                  <a-descriptions-item label="正确答案" v-if="codeResult.error!=0">{{codeResult.correctAnswer}}</a-descriptions-item>
                </a-descriptions>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="测试用例" force-render>
              <div style="width: 100%">
                <a-descriptions style="text-align: left">
                  <a-descriptions-item label="输入">
                    <a-textarea v-model:value="codeDo.testData" placeholder="测试用例x,x,x" :rows="4" style="width: 570px" />
                  </a-descriptions-item>
                </a-descriptions>
              </div>
              <a-descriptions style="text-align: left">
                <a-descriptions-item label="输出">
                  <a-textarea readonly v-model:value="codeResult.testData"  :rows="4" style="width: 570px" />
                </a-descriptions-item>
              </a-descriptions>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { usePagination } from 'vue-request';
import {computed, defineComponent, onMounted, reactive, ref} from 'vue';
import axios from 'axios';
import {isReturnTrue} from "@/util/util";
import {useRouter} from "vue-router";


export default defineComponent({
  setup() {
    const getLogInfo=(item)=>{
      const status=codeStatusEnum.get(item.codeStatus)
      console.log( "完成状态"+status+"使用语言："+item.language==null?"":item.language+"正确率："+item.correctRate==null?"":item.correctRate)
      return "完成状态->"+status+"\n使用语言->"+(item.language==null?"未知":item.language)+"\n正确率->"+(item.correctRate==null?"未知":item.correctRate)
    }
    const isLogin =()=>{
      return localStorage.getItem("USERINFO")!=null &&localStorage.getItem("USERINFO")!='null'
    }
    const activeKey=ref([])
    const router=useRouter();
    const titleSlug=ref(router.currentRoute.value.params.id)
    const questionInfo=ref({
      title:'',
      description:'',
      id:''
    });
    const codeResult=ref({
      status:'',
      correct:'',
      error:'',
      message:'',
      errorAnswer:'',
      correctAnswer:'',
      errorExample:'',
      executeTime:'',
      isTestOrSubmit:'',
      correctRate:'',
      testData:''
    })
    const codeDo=reactive({
      title:'',
      codeText:'',
      language:'',
      isTestOrSubmit:'',
      testData:''
    })
    const submit=()=>{
      if(codeDo.language===''){
        alert("请选择语言");
        return;
      }
      executeCodeLoading.value=true;
      codeDo.title=titleSlug.value;
      codeDo.isTestOrSubmit='submit';
      axios.post("/core/t-question/codeExecute",codeDo).then((response)=>{
        if(isReturnTrue(response.data.code)){
          codeResult.value.isTestOrSubmit=response.data.data.isTestOrSubmit;
          codeResult.value.status=response.data.data.status==null?'':response.data.data.status
          codeResult.value.executeTime=response.data.data.executeTime==null?'':response.data.data.executeTime
          codeResult.value.correctRate=response.data.data.correctRate==null?'':response.data.data.correctRate
          codeResult.value.message=response.data.data.message==null?'':response.data.data.message
          codeResult.value.correctAnswer=response.data.data.correctAnswer==null?'':response.data.data.correctAnswer
          codeResult.value.errorAnswer=response.data.data.errorAnswer==null?'':response.data.data.errorAnswer
          codeResult.value.errorExample=response.data.data.errorExample==null?'':response.data.data.errorExample
          codeResult.value.error=response.data.data.error==null?'':response.data.data.error
          console.log("codeResult"+codeResult.value.status);
          executeCodeLoading.value=false;
        }
        else{
          alert(response.data.message);
          executeCodeLoading.value=false;
        }
      });
    }
    const executeOrTest=ref('1');
    const executeCodeLoading=ref(false)
    const selectedLanguage=ref();
    const language=ref([])
    const getQuestionInfo=()=>{
      let _questionInfo=questionInfo;
      axios.get("/core/t-question/info/"+titleSlug.value).then((response)=>{
        if(isReturnTrue(response.data.code)){
          _questionInfo.value=response.data.data;
          console.log(questionInfo.value)
        }
        else{
          alert(response.data.message);
          return;
        }
      })
    };
// 左右拖动事件
    function dragControllerLR() {
      let resize = document.getElementsByClassName("resize");
      let left = document.getElementsByClassName("left");
      let mid = document.getElementsByClassName("mid");
      let box = document.getElementsByClassName("box");
      console.log(document.getElementsByClassName("resize"));
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          resize[i].style.background = "#818181";
          var startX = e.clientX;
          resize[i].left = resize[i].offsetLeft;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            var endX = e.clientX;
            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < 50) moveLen = 50; // 左边区域的最小宽度为50px
            if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

            resize[i].style.left = moveLen; // 设置左侧区域的宽度

            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + "px";
              mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
            }
          };
          // 鼠标松开事件
          // eslint-disable-next-line no-unused-vars
          document.onmouseup = function (evt) {
            //颜色恢复
            resize[i].style.background = "#d6d6d6";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
      }
    }
// 上下拖动事件
    function dragControllerUD() {
      let resize = document.getElementsByClassName("move");
      let topBox = document.getElementsByClassName("topBox");
      let downBox = document.getElementsByClassName("downBox");
      let box = document.getElementsByClassName("mid");
      console.log(document.getElementsByClassName("move"));
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          console.log(resize[i].top);
          //颜色改变提醒
          resize[i].style.background = "#818181";
          let startY = e.clientY;
          resize[i].top = resize[i].offsetTop;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            var endY = e.clientY;
            var moveLen = resize[i].top + (endY - startY); // （endY - startY）=移动的距离。resize[i].top+移动的距离=上边区域最后的高度
            var maxT = box[i].clientHeight - resize[i].offsetHeight; // 容器高度 - 上边区域的高度 = 下边区域的高度

            if (moveLen < 50) moveLen = 50; // 上边区域的最小高度为50px
            if (moveLen > maxT - 150) moveLen = maxT - 150; //下边区域最小高度为150px

            resize[i].style.top = moveLen; // 设置上边区域的高度

            for (let j = 0; j < topBox.length; j++) {
              topBox[j].style.height = moveLen + "px";
              downBox[j].style.height = box[i].clientHeight - moveLen - 10 + "px";
            }
          };
          // 鼠标松开事件
          document.onmouseup = function () {
            //颜色恢复
            resize[i].style.background = "#d6d6d6";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
      }
    };
    const codeStatusEnum=new Map();
    const getLanguage=()=>{
      axios.get("/core/enum/LanguageEnum").then((response)=>{
        if(isReturnTrue(response.data.code)){
          for (let i = 0; i < response.data.data.length; i++) {
            console.log(response.data.data[i].code)
            language.value.push(response.data.data[i].code)
          }
        }
        else{
          alert(response.data.message)
        }
      })
    };
    const getCodeStatus=()=>{
      axios.get("/core/enum/CodeStatusEnum").then((response)=>{
        if(isReturnTrue(response.data.code)){
          for (let i = 0; i < response.data.data.length; i++) {
            codeStatusEnum.set(response.data.data[i].code,response.data.data[i].name);
          }
        }
      })
      console.log(codeStatusEnum);
    };
    const test=()=>{
      if(codeDo.language===''){
        alert("请选择语言");
        return;
      }
      executeCodeLoading.value=true;
      codeDo.title=titleSlug.value;
      codeDo.isTestOrSubmit='test';
      axios.post("/core/t-question/codeExecute",codeDo).then((response)=>{
        if(isReturnTrue(response.data.code)){
          codeResult.value.isTestOrSubmit=response.data.data.isTestOrSubmit;
          codeResult.value.status=response.data.data.status;
          codeResult.value.message=response.data.data.message;
          codeResult.value.testData=response.data.data.testData;
          console.log("codeResult"+codeResult.value.isTestOrSubmit);
          executeCodeLoading.value=false;
        }
        else{
          alert(response.data.message);
          executeCodeLoading.value=false;
        }
      });
    };
    const queryHistory=()=>{
      const isSelectLanguage=!(codeDo.language == null || codeDo.language === '')
      const s=isSelectLanguage?("&language="+codeDo.language):""
      axios.get("/core/t-question/questionLog?title="+titleSlug.value+s).then((response)=>{
        if(isReturnTrue(response.data.code)){
          codeDo.codeText=response.data.data.codeShow
          questionLog.value.history=response.data.data.userQuestionLogList
        }
        else{
          alert(response.data.message)
        }
      })
    }
    const questionLog=ref({
      codeShow:'',
      history:[{
        codeText:'',
        codeStatus:'',
        status:'',
        correctRate:'',
        language:''
      }]
    })
    onMounted(()=>{
      getCodeStatus();
      getLanguage();
      getQuestionInfo();
      queryHistory()
      dragControllerLR();
      dragControllerUD();
    })
    return {
      activeKey,
      titleSlug,
      codeStatusEnum,
      questionInfo,
      language,
      selectedLanguage,
      getLanguage,
      executeOrTest,
      codeResult,
      executeCodeLoading,
      submit,
      codeDo,
      test,
      isLogin,
      queryHistory,
      questionLog,
      getLogInfo

    };
  },
});

</script>
<style>

/* 拖拽相关样式 */

/*包围div样式*/
.box {
  width: 100%;
  height: calc(98vh - 10px);
  margin: 1% 0px;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {
  width: calc(32% - 10px); /*左侧初始化宽度*/
  height: 100%;
  /*background: #71ad88;*/
  float: left;
  text-align: left;

}
/* 拖拽区div样式 */
.resize {
  cursor: w-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
}

/*拖拽区鼠标悬停样式*/
.move:hover {
  color: #444444;
}
/*右侧div'样式*/
.mid {
  float: left;
  width: 68%; /*右侧初始化宽度*/
  height: 90%;
  background: #f3f3f3;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
  overflow: auto;
}
/*上方div'样式*/
.topBox {
  height: 60%;
  background-color: #3ff53f;
  display: flex;
}
/*下方div'样式*/
.downBox {
  height: calc(40% );
  display: flex;
}
/* 拖拽区div样式 */
.move {
  cursor: s-resize;
  width: 50px;
  height: 10px;
  background-color: #d6d6d6;
  margin: 0 auto;
  border-radius: 5px;
  text-align: center;
  line-height: 3px;
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.move:hover {
  color: #444444;
}


</style>
